<template>
  <el-tabs v-model="activeName" stretch="true" @tab-click="handleClick">
    <el-tab-pane label="财大教工注册" name="cdjg">
      <div class="loginWrapper">
        <div class="hd">
          <p>*财大教工(包含校聘和院聘)请使用10位工号注册</p>
        </div>
        <div class="bd">
          <el-form :model="registerForm" :rules="registerRule" ref="registerForm">
            <el-form-item prop="username">
              <el-input type="username" v-model="registerForm.username" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="registerForm.password" placeholder="密码" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="checkPassword">
              <el-input v-model="registerForm.checkPassword" placeholder="请再次输入密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="checked"  @change="checkRules($event)">我已认真阅读并确认考务纪律
              </el-checkbox><el-button type="text" @click="dialogShow()">《考务纪律》</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()" class="submitBtn">立即注册</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="ft">
          <router-link to="/">已经有账号？马上登录</router-link>
        </div>
      </div>
    </el-tab-pane>

    <el-tab-pane label="考生注册" name="xs">
      <div class="loginWrapper">
        <div class="hd">
          <p>*请使用准考证号注册</p>
        </div>
        <div class="bd">
          <el-form :model="registerForm" :rules="registerRule" ref="registerForm">
            <el-form-item prop="username">
              <el-input type="username" v-model="registerForm.username" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="registerForm.password" placeholder="密码" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="checkPassword">
              <el-input v-model="registerForm.checkPassword" placeholder="请再次输入密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()" class="submitBtn">立即注册</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="ft">
          <router-link to="/">已经有账号？马上登录</router-link>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="校外教师注册" name="xwry">
      <div class="loginWrapper">
        <div class="hd">
          <p>*请使用身份证号注册</p>
        </div>
        <div class="bd">
          <el-form :model="xwregisterForm" :rules="xwregisterRule" ref="xwregisterForm">
            <el-form-item prop="idcard">
              <el-input v-model="xwregisterForm.idcard" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input v-model="xwregisterForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item prop="gender">
              <el-select v-model="xwregisterForm.gender" placeholder="请选择性别" style="width: 100%;">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="birthday">
              <el-date-picker v-model="xwregisterForm.birthday" type="date" placeholder="生日" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item prop="mobilePhone">
              <el-input  v-model="xwregisterForm.mobilePhone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input  v-model="xwregisterForm.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="xwregisterForm.password" placeholder="密码" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="checkPassword">
              <el-input v-model="xwregisterForm.checkPassword" placeholder="请再次输入密码" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="checked" @change="checkRules($event)">我已认真阅读并确认考务纪律
              </el-checkbox><el-button type="text" @click="dialogShow()">《考务纪律》</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="xwsubmitForm()" class="submitBtn">立即注册</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="ft">
          <router-link to="/">已经有账号？马上登录</router-link>
        </div>
      </div>
    </el-tab-pane>
    <el-dialog title="考务纪律" :visible.sync="showDialog" :show-close="showClose" width="80%" center>
      <center><div v-show="countdownShow"><count-down :time="initTime" v-on:getChildrenNotify="getChildrenNotify"></count-down>
      </div>
      </center>
     <div v-html="examinationRule"></div>
    </el-dialog>
  </el-tabs>
</template>
<script>
  import { fetchExaminationRules } from '@/api/basicInfoSetting'
  import md5 from 'js-md5'
  import { parseDate } from '@/utils'
  import CountDown from '@/components/CountDown'
  export default {
    name: 'register',
    components: { CountDown },
    data() {
      var validateUser = (rule, value, callback) => {
        var pattern = /^[0-9]*$/g
        if (value === '') {
          callback(new Error('请输入正确的用户名'))
        } else if (!pattern.test(value)) {
          callback(new Error('请输入正确的用户名'))
        } else {
          callback()
        }
      }
      var validateEmail = (rule, value, callback) => {
        var pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        if (!pattern.test(value)) {
          callback(new Error('请输入正确的邮箱'))
        } else {
          callback()
        }
      }
      var validatePhone = (rule, value, callback) => {
        var pattern = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
        if (!pattern.test(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
      var validateIdcard = (rule, value, callback) => {
        var pattern = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        if (!pattern.test(value)) {
          callback(new Error('请输入正确的身份证号'))
        } else {
          callback()
        }
      }
      var validatePwd = (rule, value, callback) => {
        var pattern = /^\S{6,20}$/g
        if (value === '') {
          callback(new Error('请输入密码'))
        } else if (!pattern.test(value)) {
          callback(new Error('请输入6-20个非空白字符'))
        } else {
          if (this.registerForm.checkPassword !== '') {
            this.$refs.registerForm.validateField('checkPassword')
          }
          callback()
        }
      }
      var xwvalidatePwd = (rule, value, callback) => {
        var pattern = /^\S{6,20}$/g
        if (value === '') {
          callback(new Error('请输入密码'))
        } else if (!pattern.test(value)) {
          callback(new Error('请输入6-20个非空白字符'))
        } else {
          if (this.xwregisterForm.checkPassword !== '') {
            this.$refs.xwregisterForm.validateField('checkPassword')
          }
          callback()
        }
      }
      var validateCheckPwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.registerForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      var xwvalidateCheckPwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.xwregisterForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        registerForm: {
          username: '',
          password: '',
          checkPassword: ''

        },
        xwregisterForm: {
          username: '',
          name: '',
          birthday: '',
          gender: '',
          mobilePhone: '',
          email: '',
          password: '',
          checkPassword: '',
          idcard: ''
        },
        countdownShow: true,
        showClose: false,
        initTime: 20,
        activeName: 'cdjg',
        checked: false,
        showDialog: false,
        showTimeDialog: false,
        examinationRule: ``,
        registerRule: {
          username: [
            { required: true, validator: validateUser, trigger: 'blur' }
          ],
          password: [
            { required: true, validator: validatePwd, trigger: 'blur' }
          ],
          checkPassword: [
            { required: true, validator: validateCheckPwd, trigger: 'blur' }
          ]
        },
        xwregisterRule: {
          idcard: [
            { required: true, validator: validateIdcard, trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请输入性别', trigger: 'blur' }
          ],
          mobilePhone: [
            { required: true, validator: validatePhone, trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '请输入出生日期', trigger: 'blur' }
          ],
          email: [
            { validator: validateEmail, trigger: 'blur' }
          ],
          password: [
            { required: true, validator: xwvalidatePwd, trigger: 'blur' }
          ],
          checkPassword: [
            { required: true, validator: xwvalidateCheckPwd, trigger: 'blur' }
          ]
        }
      }
    },
    computed: {

    },
    created: function() {
      fetchExaminationRules().then(response => {
        // console.log(response)
        this.examinationRule = response.content
      }).catch(error => {
        console.log(error)
        this.fetchSuccess = false
        this.$message.error('获取考试规则失败')
      })
    },
    methods: {
      submitForm() {
        this.$refs.registerForm.validate((valid) => {
          if (valid) {
            this.loading = true
            const data = {
              'username': this.registerForm.username,
              'password': md5(this.registerForm.password)
            }
            if (!this.checked) {
              this.$message.error('请认真阅读并确认考务纪律')
              return
            }
            if (this.activeName === 'cdjg') {
              this.$store.dispatch('TeacherRegister', data).then(() => {
                this.loading = false
                this.$router.push({ path: '/' })
              }).catch(() => {
                this.loading = false
                console.log('注册失败')
              })
            } else {
              this.$store.dispatch('ExamineeRegister', data).then(() => {
                this.loading = false
                this.$router.push({ path: '/' })
              }).catch(() => {
                this.loading = false
                console.log('注册失败')
              })
            }
          } else {
            this.$message.error('请填写正确的注册信息')
            return false
          }
        })
      },
      xwsubmitForm() {
        // console.log(this.$refs.xwregisterForm)
        this.$refs.xwregisterForm.validate((valid) => {
          if (valid) {
            this.loading = true
            const xwTeacherForm = {
              'username': this.xwregisterForm.idcard,
              'name': this.xwregisterForm.name,
              'birthday': parseDate(this.xwregisterForm.birthday),
              'gender': this.xwregisterForm.gender,
              'mobilePhone': this.xwregisterForm.mobilePhone,
              'email': this.xwregisterForm.email,
              'password': md5(this.xwregisterForm.password),
              'checkPassword': this.xwregisterForm.checkPassword
            }
            if (!this.checked) {
              this.$message.error('请认真阅读并确认考务纪律')
              return
            }
            this.$store.dispatch('XwTeacherRegister', xwTeacherForm).then(() => {
              this.loading = false
              this.$router.push({ path: '/' })
            }).catch(() => {
              this.loading = false
              console.log('注册失败')
            })
          } else {
            console.log(valid + ':验证没通过')
            return false
          }
        })
      },
      handleClick() {
        console.log(this.activeName)
      },
      dialogShow() {
        this.showDialog = true
      },
      checkRules(value) {
        if (this.checked) {
          this.showDialog = true
        }
      },
      getChildrenNotify(data) {
        if (data === 0) {
          this.countdownShow = false
          this.showClose = true
        }
      }
    }
}
</script>
<style scoped>
.loginWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}
.loginWrapper .hd {
  width: 300px;
}
.loginWrapper .hd p {
  font-size: 15px;
  text-align: center;
  color: red;
}
.loginWrapper .bd {
    width: 300px;
}
.loginWrapper .bd .submitBtn {
  width: 100%;
}
.loginWrapper .bd .el-form-item:last-child {
  margin-bottom: 10px;
}
.loginWrapper .ft {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 300px;
}
.loginWrapper .ft a {
  font-size: 14px;
  text-decoration: none;
  color: #20A0FF;
}
</style>